<template>
  <div class="course-con" v-if="currentCourse">
    <!-- 视频音频 -->
    <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      v-if="getFileType(currentCourse.file) == 'video' || getFileType(currentCourse.file) == 'radio'"></div>
    <!-- office文件 -->
    <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
        getFileType(currentCourse.file) == 'excel' ||
          getFileType(currentCourse.file) == 'word' ||
          getFileType(currentCourse.file) == 'pdf' ||
          getFileType(currentCourse.file) == 'ppt'
      " style="height:720px;">
      <iframe class="course-iframe" :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentCourse.file" @loadstart="isIframeLoad=true" @load="isIframeLoad = false"></iframe>
    </div>
    <!-- 图片 -->
    <div v-else-if="getFileType(currentCourse.file) == 'image'"><img :src="currentCourse.file" /></div>

    <!-- swf文件 -->
    <template v-else-if="getFileType(currentCourse.file) == 'swf'">
      <object :data="currentCourse.file" type="application/x-shockwave-flash" style="width: 100%;height: 100vh;">
        <param name="movie" value="demo.swf" style="width: 100%;height: 100vh;" />
        <embed :src="currentCourse.file" style="width: 100%;height: 100vh;" />
      </object>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isIframeLoad:true,
        currentTxt: 0, //当前歌词所在位置
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        showImg: true, //没有歌词显示转动图片，
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        bgTimer: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        flag: 0, //防止定时器多次执行
        imgNum: 0, //轮播图第几张
      };
    },
    props: ['currentCourse'],
    created() {
      this.openCourse(this.currentCourse);
    },
    methods: {
      // 打开课程
      openCourse(item) {
        this.currentCourse = item;
        if (this.getFileType(item.file) == 'video') {
          this.aliplay(item.file);
        } else if (this.getFileType(item.file) == 'radio') {
          this.music = item.file;

          //是否有歌词，有歌词进行处理
          if (item.lyric_text != '' && item.lyric_text != undefined) {
            this.array = [];
            this.showImg = false;
            let lyricArr = item.lyric_text.split('[').slice(1); // 先以[进行分割
            let lrcObj = {};
            lyricArr.forEach(item => {
              var data = {};
              let arr = item.split(']'); // 再分割右括号
              // 时间换算成秒
              let m = parseInt(arr[0].split(':')[0]);
              let s = parseInt(arr[0].split(':')[1]);
              arr[0] = m * 60 + s;
              data.time = arr[0];
              if (arr[1] != '\n') {
                // 去除歌词中的换行符
                lrcObj[arr[0]] = arr[1];
                data.text = arr[1];
              }
              this.array.push(data);
            });

            this.read = this.array.slice(0, this.indexArray + 10);
            console.log(this.read);
          } else {
            this.showImg = true;
          }
          if (item.rotation_img_text != '' && item.rotation_img_text != undefined) {
            console.log(item.rotation_img_text);
            this.bgAllImg = item.rotation_img_text;
            this.bgImg = this.bgAllImg[0];
            this.showImg = false;
          } else {
            this.bgImg = '../../../static/img/music-bg.jpg';
            this.bgAllImg = [];
            clearInterval(this.bgTimer);
            this.flag = 0;
          }
          if (this.flag == 1) {
            return;
          }
          if (this.bgAllImg.length > 1) {
            this.bgTimer = setInterval(() => {
              this.flag = 1;
              this.bgImg = this.bgAllImg[this.imgNum];
              if (this.imgNum == this.bgAllImg.length - 1) {
                this.imgNum = -1;
              }
              this.imgNum++;
              console.log(this.imgNum + 'imgnum');
            }, 10000);
          } else {
            clearInterval(this.bgTimer);
          }
        }
      },
      // 阿里云视频播放
      aliplay(file) {
        this.isIframeLoad = true
        if (player) {
          player.dispose();
        }

        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime);
        };

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo);
        };
        this.$nextTick(() => {
          player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '100%',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime]
              }],
              skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
            },
            function (player) {
              console.log('The player is created');
            }
          );
          player.on('ready',()=>{
            this.isIframeLoad = false
            // console.log('加载成功')
          })
        });
      },
      getFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        try {
          const flieArr = fileName.split('.');
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false;
        }
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return 'image';
        }
        // 匹配txt
        const txtlist = ['txt'];
        result = txtlist.find(item => item === suffix);
        if (result) {
          return 'txt';
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx'];
        result = excelist.find(item => item === suffix);
        if (result) {
          return 'excel';
        }
        // 匹配 word
        const wordlist = ['doc', 'docx'];
        result = wordlist.find(item => item === suffix);
        if (result) {
          return 'word';
        }
        // 匹配 pdf
        const pdflist = ['pdf'];
        result = pdflist.find(item => item === suffix);
        if (result) {
          return 'pdf';
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx'];
        result = pptlist.find(item => item === suffix);
        if (result) {
          return 'ppt';
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm'
        ];
        result = videolist.find(item => item === suffix);
        if (result) {
          return 'video';
        }
        // 匹配 音频
        const radiolist = ['aac', 'ac3', 'acm', 'amr', 'ape', 'caf', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'];
        result = radiolist.find(item => item === suffix);
        if (result) {
          return 'radio';
        }
        // 匹配 swf
        const swflist = ['swf'];
        result = swflist.find(item => item === suffix);
        if (result) {
          return 'swf';
        }
        // 其他 文件类型
        return 'other';
      },
    }
  };

</script>

<style>
</style>
